<template>
    <!-- offer跟进页面 -->
    <div class="offer-follow-up-container">
        <!-- 操作栏 -->
        <div class="toolbar">
            <div class="toolbar-left">
                
            </div>

            <div class="toolbar-right">
                <el-input 
                    class="search-input" 
                    v-model="searchKeyword" 
                    placeholder="搜索姓名或部门" 
                    @keyup.enter="handleSearch"
                    clearable
                >
                    <template #prefix>
                        <el-icon><Search /></el-icon>
                    </template>
                </el-input>

                <el-dropdown @command="handleFilterCommand">
                    <el-button>
                        筛选<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item 
                                v-for="item in FilterData" 
                                :key="item.value"
                                :command="item.value"
                                :class="{ active: Screening === item.value }"
                            >
                                {{ item.label }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

                <el-button @click="Sorting">
                    {{ toggleSort === 1 ? '升序' : '降序' }}
                    <el-icon><Sort /></el-icon>
                </el-button>

                <el-button @click="reset">
                    <el-icon><Refresh /></el-icon>
                    重置
                </el-button>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content-wrapper">
            <!-- 数据表格 -->
            <div class="table-container">
                <el-table 
                    :data="page.records" 
                    class="offer-table"
                    @row-click="handleClick"
                    v-loading="loadingTable"
                >
                    <el-table-column fixed="left" prop="RequirementID" label="所属需求编号" width="150" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.candidateresume?.resumeRequirements }}</span>
                        </template>
                    </el-table-column>
                    
                    <el-table-column fixed="left" prop="CandidateID" label="简历编号" width="150" align="center">
                        <template #default="scope">
                            <span>{{ scope.row.applicantId }}</span>
                        </template>
                    </el-table-column>
                    
                    <el-table-column prop="DistributionTime" label="发放日期" sortable width="150" align="center">
                        <template #default="scope">
                            <span>{{ scope.row.distributionTime }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="CandidateName" label="姓名" width="150" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.candidateresume?.candidatename }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="OfferStatus" label="offer状态" width="150" align="center">
                        <template #default="scope">
                            <el-tag 
                                :type="getOfferStatusType(scope.row.offerStatus)"
                                effect="dark"
                            >
                                {{ scope.row?.offerStatus }}
                            </el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="OfferPosition" label="offer岗位" width="150" align="center">
                        <template #default="scope">
                            <el-tag>{{ scope.row.candidateresume?.intendedPosition }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="OnboardingDepartment" label="入职部门" width="150" align="center">
                        <template #default="scope">
                            <el-tag type="success">{{ scope.row.department?.deptName }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="CellPhone" label="手机号" width="150" align="center">
                        <template #default="scope">
                            <span>{{ scope.row.candidateresume?.cellPhone }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="Mailbox" label="邮箱" width="150" align="center">
                        <template #default="scope">
                            <span>{{ scope.row.candidateresume?.mailbox }}</span>
                        </template>
                    </el-table-column>
                    
                    <el-table-column prop="ProbationPeriod" label="试用期" width="150" align="center">
                        <template #default="scope">
                            <span>{{ scope.row.probationPeriod }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="ProbationarySalary" label="试用期薪资" width="150" align="center">
                        <template #default="scope">
                            <span>{{ scope.row.probationarySalary }}</span>
                        </template>
                    </el-table-column>
                    
                    <el-table-column prop="Salary" label="转正薪资" width="150" align="center">
                        <template #default="scope">
                            <span>{{ scope.row.salary }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="ReportedDate" label="报道日期" sortable width="150" align="center">
                        <template #default="scope">
                            <span>{{ scope.row.reportedDate }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="Creator" label="提交人" width="150" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.senderBy }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="WarehousingDate" label="提交时间" sortable width="150" align="center">
                        <template #default="scope">
                            <span>{{ scope.row.submit }}</span>
                        </template>
                    </el-table-column>
                    
                    <el-table-column label="操作" width="150" align="center" fixed="right">
                        <template #default="scope">
                            
                            <el-button size="small" type="success" @click.stop="handleOnboarding(scope.row)" v-if="scope.row.offerStatus === '待入职'">入职通知</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                v-model:current-page="page.current"
                v-model:page-size="page.size"
                :page-sizes="[10, 20, 30, 40]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                background
            >
            </el-pagination>
        </div>
    </div>
    
    <!-- 详情页面 -->
    <el-dialog 
        :title="`Offer详情 - ${dataNumber}`" 
        v-model="isVisible" 
        fullscreen 
        lock-scroll="true" 
        destroy-on-close
    >
        <hr />
        <MoreDetailsAboutTheOffer :data="dataNumber"></MoreDetailsAboutTheOffer>
    </el-dialog>

    <!-- 添加页面 -->
    <el-dialog 
        title="offer跟进添加" 
        v-model="AddDisplay" 
        fullscreen 
        destroy-on-close
    >
        <hr>
        <OfferFollowUpAddition @ref="Initiate"></OfferFollowUpAddition>
    </el-dialog>
    
    <!-- 入职通知 -->
    <el-dialog 
        title="入职通知" 
        v-model="onboardingDisplay" 
        fullscreen 
        destroy-on-close
    >
        <hr>
        <employmentNotice :data="dataNumber" @ref-table="refTable"></employmentNotice>
    </el-dialog>
</template>

<script lang="ts" setup>
import request from '@/api/request';
import { ref, onMounted } from 'vue';
import MoreDetailsAboutTheOffer from '@/views/recruitment/OfferManagement/MoreDetailsAboutTheOffer.vue'
import OfferFollowUpAddition from '@/views/recruitment/OfferManagement/OfferFollowUpAddition.vue'
import employmentNotice from '@/views/recruitment/OfferManagement/employmentNotice.vue'
import { Plus, Search, ArrowDown, Sort, Refresh } from '@element-plus/icons-vue'

// 响应式数据
const isVisible = ref(false) // 详情显示
const AddDisplay = ref(false) // 添加显示
const onboardingDisplay = ref(false) // 入职通知显示
const loadingTable = ref(false) // 表格加载状态
const searchKeyword = ref('') // 搜索关键字
const toggleSort = ref(1) // 排序状态
const Screening = ref('待发offer') // 筛选状态

// 分页数据
let page = ref({
    current: 1, // 当前页
    size: 10, // 每页条数
    total: 0, // 总条数
    records: [] // 数据
})

// 筛选数据
const FilterData = ref([
    { value: '待发offer', label: '全部' },
    { value: '已拒绝', label: '已拒绝' },
    { value: '已入职', label: '已入职' },
    { value: '待入职', label: '待入职' },
    { value: '已发offer', label: '已发offer' },
])

// 获取offer状态对应的tag类型
const getOfferStatusType = (status) => {
    switch (status) {
        case '待入职':
            return 'warning';
        case '已拒绝':
            return 'danger';
        case '已入职':
            return 'success';
        case '已发offer':
            return 'primary';
        default:
            return '';
    }
}

// 搜索处理
const handleSearch = () => {
    page.value.current = 1
    ObtainData()
}

// 获取数据
const ObtainData = () => {
    loadingTable.value = true
    request({
        url: '/offermanagementtable/findAllStatus',
        method: 'get',
        params: {
            pageNum: page.value.current,
            pageSize: page.value.size,
            status: Screening.value || '',
            intendedPosition: searchKeyword.value,
            deptName: searchKeyword.value
        }
    }).then(res => {
        if (res.data.records) {
            page.value = res.data
        } else {
            page.value = {
                current: 1,
                size: res.data.length,
                total: res.data.length,
                records: res.data
            }
        }
        loadingTable.value = false
    }).catch(() => {
        loadingTable.value = false
    })
}

// 排序处理
const Sorting = () => {
    toggleSort.value = toggleSort.value === 1 ? 2 : 1 //如果排序状态为1，则切换为2，否则切换为1
    const url = toggleSort.value === 1 
        ? '/offermanagementtable/moreAdvancedStatusAscendingOrder' 
        : '/offermanagementtable/followUpOnTheDescendingOrderOfStatus'
    
    loadingTable.value = true
    request({
        url,
        method: 'get',
        params: {
            pageNum: page.value.current,
            pageSize: page.value.size,
            status: Screening.value || '',
            intendedPosition: searchKeyword.value,
            deptName: searchKeyword.value
        }
    }).then(res => {
        if (res.data.records) {
            page.value = res.data
        } else {
            page.value = {
                current: 1,
                size: res.data.length,
                total: res.data.length,
                records: res.data
            }
        }
        loadingTable.value = false
    }).catch(() => {
        loadingTable.value = false
    })
}

// 筛选命令处理
const handleFilterCommand = (command) => {
    Screening.value = command
    page.value.current = 1
    if (Screening.value !== '待发offer' && Screening.value !== '已发offer') {
        loadingTable.value = true
        request({
            url: '/offermanagementtable/findByOffStatus',
            method: 'get',
            params: {
                pageNum: page.value.current,
                pageSize: page.value.size,
                status: Screening.value || '',
                intendedPosition: searchKeyword.value,
                deptName: searchKeyword.value
            }
        }).then(res => {
            if (res.data.records) {
                page.value = res.data
            } else {
                page.value = {
                    current: 1,
                    size: res.data.length,
                    total: res.data.length,
                    records: res.data
                }
            }
            loadingTable.value = false
        }).catch(() => {
            loadingTable.value = false
        })
    } else {
        ObtainData()
    }
}

// 分页处理
const handleCurrentChange = (val) => {
    page.value.current = val
    ObtainData()
}

const handleSizeChange = (val) => {
    page.value.size = val
    page.value.current = 1
    ObtainData()
}

// 重置处理
const reset = () => {
    Screening.value = '待发offer'
    searchKeyword.value = ''
    page.value.current = 1
    ObtainData()
}

// 行点击处理
const handleClick = (row) => {
    dataNumber.value = row.offerid
    onboardingDisplay.value = true
}

// 详情处理
const dataNumber = ref(null)
const handleDetail = (row) => {
    dataNumber.value = row.offerid
    isVisible.value = true
}

// 入职通知处理
const handleOnboarding = (row) => {
    dataNumber.value = row.offerid
    onboardingDisplay.value = true
}

// 添加处理
const Initiate = () => {
    AddDisplay.value = false
    page.value.current = 1
    ObtainData()
}

const add = () => {
    AddDisplay.value = true
}

// 入职通知回调
const refTable = () => {
    onboardingDisplay.value = false
    ObtainData()
}

// 初始化数据
onMounted(() => {
    ObtainData()
})
</script>

<style scoped>
.offer-follow-up-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.toolbar-left {
    flex: 1;
}

.toolbar-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

.search-input {
    width: 250px;
}

.content-wrapper {
    flex: 1;
    overflow: auto;
    margin-bottom: 20px;
}

.table-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.offer-table {
    width: 100%;
}

.pagination-container {
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.link-text {
    color: #409eff;
    cursor: pointer;
}

.link-text:hover {
    color: #66b1ff;
}

.active {
    color: #409eff;
    font-weight: bold;
}
</style>